var BoardTable = function () {
  var template = /* html */ `
    <div class="board-table">
      <div class="board-table-content" :style="{'padding-left':fixedWidth+'px',width:'calc(100% - '+fixedWidth+'px'}"
        @scroll="tableScroll" ref="tableContent">
        <table cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th style="min-width:120px" v-if="hasField('customer')">
                <span>客户</span>
              </th>
              <th style="min-width:100px" v-if="hasField('jiaoDate')">
                <span>交期</span>
              </th>
              <th style="min-width:100px" v-if="hasField('xiaDanDate')">
                <span>下单日期</span>
              </th>
              <th style="min-width:120px" v-if="hasField('orderCount')">
                <span>订单数</span>
              </th>
              <th style="min-width:120px" v-if="hasField('feedCount')">
                <span>投料数</span>
              </th>

              <th v-for="workshop in workshopList" :key="'workshop_'+workshop.sort" style="min-width:80px">
                <span>{{workshop.name}}</span>
              </th>

              <th v-for="showType in showTypeList" :key="'showType_'+showType" style="min-width:80px">
                <span>{{showType}}</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(data,index) in tableData" :key="'data-'+index" :class="{'odd':index%2!==0}" @click="rowClick(data)">
              <td v-if="hasField('customer')">{{data.customer}}</td>
              <td v-if="hasField('jiaoDate')" class="is-center">
                <span v-if="data.jiaoDate!==''">{{moment(data.jiaoDate).format('YYYY-MM-DD')}}</span>
              </td>
              <td v-if="hasField('xiaDanDate')" class="is-center">
                <span v-if="data.xiaDanDate!==''">{{moment(data.xiaDanDate).format('YYYY-MM-DD')}}</span>
              </td>
              <td v-if="hasField('orderCount')" class="is-center">{{data.orderCount}}</td>
              <td v-if="hasField('feedCount')" class="is-center">{{data.feedCount}}</td>

              <td v-for="workshop in workshopList" :key="'workshop_'+workshop.sort" class="is-center" v-html="getWorkshopMatch(data,workshop)">
              </td>

              <td v-for="showType in showTypeList" :key="'showType_'+showType" class="is-center" :class="{'no-material':getMaterialTypeData(data,showType)===''}">
                <span v-if="getMaterialTypeData(data,showType)===null"></span>
                <span v-else class="has-stock">{{getMaterialTypeData(data,showType)}}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div ref="tableFixed" class="board-table-fixed" v-if="hasFixed">
        <table cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th style="min-width:120px" v-if="hasField('companyOrderId')">
                <span>订单编号</span>
              </th>
              <th style="min-width:100px" v-if="hasField('factoryId')">
                <span>工厂型号</span>
              </th>
              <th style="min-width:80px" v-if="hasField('customerId')">
                <span>客户型号</span>
              </th>
              <th style="min-width:100px" v-if="hasField('customerOrderId')">
                <span>客户订单号</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(data,index) in tableData" :key="'data-'+index" :class="{'odd':index%2!==0}" @click="rowClick(data)">
              <td v-if="hasField('companyOrderId')">{{data.companyOrderId}}</td>
              <td v-if="hasField('factoryId')">{{data.factoryId}}</td>
              <td v-if="hasField('customerId')">{{data.customerId}}</td>
              <td v-if="hasField('customerOrderId')">{{data.customerOrderId}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  `;

  return {
    props: {
      tableColConfig: {
        type: Object,
        required: true
      },

      tableData: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },

    watch: {
      changeHeader: function () {
        this.calFixedWidth();
      }
    },

    computed: {
      orderInfoList: function () {
        return this.tableColConfig.orderInfoList;
      },

      workshopList: function () {
        return this.tableColConfig.workshopList;
      },

      showTypeList: function () {
        return this.tableColConfig.showTypeList;
      },

      hasFixed: function () {
        var orderInfoList = this.orderInfoList;
        var fields = ['companyOrderId', 'factoryId', 'customerId', 'customerOrderId'];
        for (var i = 0; i < fields.length; i++) {
          var field = fields[i];
          if (orderInfoList.indexOf(field) !== -1) {
            return true;
          }
        }
        return false;
      },

      changeHeader: function () {
        return {
          orderInfoList: this.orderInfoList,
          workshopList: this.workshopList,
          showTypeList: this.showTypeList,
          tableData: this.tableData
        };
      }
    },

    data: function () {
      return {
        fixedWidth: 0
      };
    },

    mounted: function () {
      this.calFixedWidth();
    },

    methods: {
      hasField: function (field) {
        var orderInfoList = this.orderInfoList;
        return orderInfoList.indexOf(field) !== -1;
      },

      getWorkshopMatch: function (data, workshop) {
        var sort = workshop.sort;
        var workshopData = data.workshopData;
        var maixStatus = workshopData[sort];
        if (maixStatus === undefined) {
          return '<span>未设置</span>';
        }
        return maixStatus === 2 ? '<span class="no-match">不配套</span>' : '<span class="has-match">配套</span>';
      },

      calFixedWidth: function () {
        var self = this;
        this.$nextTick(function () {
          var fixedWidth = 0;
          var tableFixed = self.$refs['tableFixed'];
          if (tableFixed !== undefined) {
            fixedWidth = $(tableFixed).width() - 1;
          }
          self.fixedWidth = fixedWidth;
        });
      },

      getMaterialTypeData: function (data, materialType) {
        var materialTypeData = data.materialTypeData;
        var stockCount = materialTypeData[materialType];
        if (stockCount === undefined) {
          return '';
        }
        return stockCount;
      },

      rowClick: function (data) {
        this.$emit('row-click', data);
      },

      tableScroll: function () {
        if (!this.hasFixed) {
          return;
        }

        var tableContent = this.$refs['tableContent'];
        var top = $(tableContent).scrollTop();
        var tableFixed = this.$refs['tableFixed'];
        $(tableFixed).scrollTop(top);
      }
    },

    template: template
  };
}();
